<template>
  <div class="earth-container">
    <!-- 浮动文本 -->
    <!-- <div class="belt-speed-label">
      皮带速度：{{ beltSpeed }} m/s
    </div> -->

    <!-- SVG 图标 -->
    <Belt2_2_N ref="svgRef" class="earth-svg" />
  </div>
</template>


<script setup lang="ts">
import { ref, onMounted, watch, shallowRef, nextTick, computed } from "vue";
// import EarthIcon from "../../../assets/5_2_1kuang.svg";
import Belt2_2_N from '../../../../assets/Bunker/Bunker2_2.svg';
import { applyAnimations, clearAllAnimations } from '../../../animationManager';
import {act} from '../../../../utils/websocket'
// svg 元素引用
const svgRef = ref<InstanceType<typeof Belt2_2_N>>();

// 接收属性
const props = defineProps({
  runEarth: { type: Boolean, default: false },
  speed: { type: Number, default: 0 },
});
// const beltSpeed = computed(() => act.speed);
const Beltrun = computed(() => act.run);

// 初始化
onMounted(() => {
  const svg = svgRef.value!.$el as SVGSVGElement;
  // 自转动画
  applyAnimations(svg, Beltrun.value);
});

watch(
  () => Beltrun.value,
  (newVal) => {
    const svg = svgRef.value!.$el as SVGSVGElement;
    newVal ? applyAnimations(svg, true) : clearAllAnimations(svg);
  }
);
</script>

<style scoped>
.earth-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  position: relative; /* 新增定位上下文 */
}

.earth-svg {
  transform-origin: center;
  display: block;
}
/* 浮动文字样式 */
.belt-speed-label {
  position: absolute;
  top: 55px;       /* 可调整 */
  left: 70px;      /* 可调整 */
  color: #ffffff;
  font-size: 17px;
  pointer-events: none; /* 不影响 SVG 交互 */
  z-index: 10;
}
</style>
